<template>
  <div class="statistics">
    <router-link to="/index">管理</router-link>
    <div class="app-top">数据概览</div>
    <div class="top">
      <div>
        <el-select v-model="value" placeholder="区域">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div>
        <el-select v-model="value" placeholder="业务">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="app-box">
      <div class="box-num">
        <div class="name">上月新用户</div>
        <div class="num -a">2031</div>
      </div>
      <div class="box-num">
        <div class="name">本月新用户</div>
        <div class="num -b">1089</div>
      </div>
      <div class="box-num">
        <div class="name">上周新用户</div>
        <div class="num -c">229</div>
      </div>
      <div class="box-num">
        <div class="name">本周新用户</div>
        <div class="num -d">182</div>
      </div>
      <div class="box-num">
        <div class="name">今日新用户</div>
        <div class="num -e">75</div>
      </div>
    </div>
    <div class="app-box">
      <div class="box-num">
        <div class="name">上月总订单</div>
        <div class="num -a">7082</div>
      </div>
      <div class="box-num">
        <div class="name">本月总订单</div>
        <div class="num -b">4809</div>
      </div>
      <div class="box-num">
        <div class="name">上周总订单</div>
        <div class="num -c">228</div>
      </div>
      <div class="box-num">
        <div class="name">本周总订单</div>
        <div class="num -d">201</div>
      </div>
      <div class="box-num">
        <div class="name">今日总订单</div>
        <div class="num -e">62</div>
      </div>
    </div>
    <div class="app-box">
      <div class="box-num">
        <div class="name">上月订单额</div>
        <div class="num-coin -a">9083.00</div>
      </div>
      <div class="box-num">
        <div class="name">本月订单额</div>
        <div class="num-coin -b">8739.20</div>
      </div>
      <div class="box-num">
        <div class="name">上周订单额</div>
        <div class="num-coin -c">1829.00</div>
      </div>
      <div class="box-num">
        <div class="name">本周订单额</div>
        <div class="num-coin -d">1703.00</div>
      </div>
      <div class="box-num">
        <div class="name">今日订单额</div>
        <div class="num-coin -e">610.00</div>
      </div>
    </div>
    <a href="../meta-ui/taskhub/taskhub/order2">
      <div class="list">
        <span>取快递</span>
        <div class="state">
          <span>待接单 <b>13</b></span>
          <span>待取件 <b>4</b></span>
          <span>待配送 <b>0</b></span>
        </div>
      </div>
    </a>
    <div class="list">
      <span>遛狗</span>
      <div class="state">
        <span>待接单 <b>2</b></span>
        <span>待完成 <b>1</b></span>
      </div>
    </div>
    <div class="list">
      <span>帮办事</span>
      <div class="state">
        <span>待接单 <b>2</b></span>
        <span>待完成 <b>1</b></span>
      </div>
    </div>
    <div id="main" class="charts" style="height: 200px; width: 100%" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Index',
  data() {
    return {
      chartDom: '',
      myChart: '',
      option: ''
    }
  },

  // 隐藏系统导航框架
  mounted() {
    this.$store.dispatch('app/toggleSideBarHide', true)
    document.querySelector('.navbar').style.display = 'none'
    document.querySelector('.tags-view-container').style.display = 'none'
    this.$nextTick(() => {
      this.chartDom = document.getElementById('main')
      this.myChart = echarts.init(this.chartDom)
      this.initChart()
    })
  },
  methods: {
    initChart() {
      console.log(document.getElementById('main'), '----d')
      // return;
      // this.chart = echarts.init(this.$el, "macarons");
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '1%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            show: false // 这里设置Y轴不显示
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [300, 102, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220, 390, 330, 220]
          }
        ]
      }
      this.option && this.myChart.setOption(this.option)
    }
    //
  }
}
</script>

<style>
html{
  background-color: #ecedf1;
}
.statistics{
  width: 100%;
  padding: 15px;
  display: flex;
   flex-direction: column;
}
.top{
  display: flex;
  flex-direction: row;
}
.app-top{
  font-size: 1.1rem;
  font-weight: bold;
  color: #888888;
}
.top>div{
  width: 50%;
  margin: 5px;
}
 .app-box{
  width: 100%;
  display: flex;
  flex-direction: row;
 }
.box-num{
  width: 22%;
  padding: 5px;
  margin: 3px 3px 0 0;
  border-radius:2PX ;
}
.name{
  font-size: .6rem;
  line-height: 1rem;
  color: #8a8b94;
    text-align: center;

}
.box-num>span{
  font-size: .8rem;
  color: #7e7f8d;
   text-align: center;
}
.num{
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
}
.num-coin{
  font-size: .9rem;
  line-height: 2rem;
  text-align: center;
}
.-a{
  color: #3a51ff;
}
.-b{
  color: #c955ff;
}
.-c{
  color: #29c075;
}
.-d{
  color: #ff6479;
}
.-e{
  color: #ffb71c;
}
.list{
  width: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 15px;
  margin: 5px auto;
  border-radius: 3px;
   box-shadow: 0 0.3rem 1rem 0 rgba(168, 168, 168, 0.2);
}
.list>span{
  font-size: 1rem;
  width: 100%;
  font-weight: bold;
  line-height: 1.8rem;
}
.state{
  width: 100%;
  display: flex;
  flex-direction: row;
}
.state>span{
  margin-right: 20px;
  font-size: .9rem;
}
.state>span>b{
  color: #000000;
}
#main{
  width: 100%;
  height: 600px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
